import Vue from "vue";

import "normalize.css/normalize.css"; // A modern alternative to CSS resets

import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import "@/styles/index.scss"; // global css

import "./register-base-components";

import App from "./App";
import store from "./store";
import router from "./router";

import "@/icons"; // icon

import mixin from "./mixins";

import GlsxDialog from "@/components/Dialog";
import MediaSelect from "@/components/follow/media.vue";
import ChannelSelect from "@/components/follow/channel.vue";
import PublicPoll from "@/components/common/publicPoll.vue";
import FieldSelect from "@/components/common/field.vue";
import ConditionRemark from "@/components/common/remark.vue";
Vue.component("glsx-dialog", GlsxDialog);
Vue.component("media-select", MediaSelect);
Vue.component("channel-select", ChannelSelect);
Vue.component("public-poll", PublicPoll);
Vue.component("field-select", FieldSelect);
Vue.component("condition-remark", ConditionRemark);

// 动态设置表格行的className
Vue.prototype.$getTableClass = function ({ row, index }) {
  let _tableClassName = "";
  if (row.colour == 1) {
    _tableClassName = "el_table_orange";
  }
  if (row.colour == 2) {
    _tableClassName = "el_table_yellow";
  }
  return _tableClassName;
};

// 获取页面表格高度
const _getTableHeight = function (pageId, topId, tabId) {
  //const _this = document.querySelector('#app').__vue__;
  const _this = this;
  console.log(_this.$el);
  let tableId = tabId || "multipleTable";
  let _pageHeight = 0;
  let _total = 0;
  let _pageDom = _this.$refs[pageId || "pageComBox"];
  if (_pageDom) {
    _pageHeight = _pageDom.offsetHeight;
  }
  let _dom = _this.$refs[topId || "otherBox"];
  if (_dom) {
    console.log(_dom.offsetHeight);
    _total += Number(_dom.offsetHeight || 0);
  }
  let m = _pageHeight - _total;
  _this.tableHeight = m - 30 - 60;
  if (tableId && _this.$refs[tableId]) {
    _this.$refs[tableId].doLayout();
  }
};
Vue.prototype.$getTableHeight = _getTableHeight;

// 监听表格滚动
Vue.directive("tabscroll", {
  bind(el, binding, vnode) {
    // const selectWrap = el.querySelector(".el-table__body-wrapper");
    // selectWrap.addEventListener("scroll", function (e) {
    //   let _dom = document.querySelector("div.params");
    //   let _top = e.target.scrollTop;
    //   console.log('滚动条高度',_top);
    //   if (_top > 0) {
    //     _dom.style.display = "none";
    //   } else {
    //     _dom.style.display = "block";
    //   }
    //   if (binding.expression && vnode.context[binding.expression]) {
    //     vnode.context[binding.expression](binding.arg);
    //   } else {
    //     binding.value(binding.arg);
    //   }
    // });
  },
});

Vue.use(ElementUI, {
  size: "mini",
});

Vue.config.productionTip = false;

Vue.mixin(mixin);

new Vue({
  el: "#app",
  router,
  store,
  render: (h) => h(App),
});
